<template>
	<ClientOnly>
		<p v-html="decodedDescription" />
		<div class="card-wrapper">
			<div class="card-examples">
				<component :is="formatPathDemos[path]" />
			</div>
			<div class="card-footer">
				<el-tooltip
					content="复制代码"
					:show-arrow="false"
					popper-class="popper-h"
				>
					<el-icon :size="16" class="tooltip-margin" @click="copyCode">
						<svg
							preserveAspectRatio="xMidYMid meet"
							viewBox="0 0 24 24"
							width="1.2em"
							height="1.2em"
							data-v-65a7fb6c=""
						>
							<path
								fill="currentColor"
								d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"
							/>
						</svg>
					</el-icon>
				</el-tooltip>
				<el-tooltip
					content="查看源代码"
					:show-arrow="false"
					popper-class="popper-h"
				>
					<el-icon
						:size="16"
						class="tooltip-margin"
						@click="sourceVisible = !sourceVisible"
					>
						<svg
							preserveAspectRatio="xMidYMid meet"
							viewBox="0 0 24 24"
							width="1.2em"
							height="1.2em"
							data-v-65a7fb6c=""
						>
							<path
								fill="currentColor"
								d="m23 12l-7.071 7.071l-1.414-1.414L20.172 12l-5.657-5.657l1.414-1.414L23 12zM3.828 12l5.657 5.657l-1.414 1.414L1 12l7.071-7.071l1.414 1.414L3.828 12z"
							/>
						</svg>
					</el-icon>
				</el-tooltip>
			</div>
			<Transition>
				<div v-show="sourceVisible">
					<div class="language-vue" v-html="decoded" />
					<div class="example-float-control" @click="sourceVisible = false">
						<el-icon :size="16">
							<CaretTop />
						</el-icon>
						<span>隐藏源代码</span>
					</div>
				</div>
			</Transition>
		</div>
	</ClientOnly>
</template>
<script setup lang="ts">
	import { computed, ref } from 'vue';
	import { useClipboard } from '@vueuse/core';
	import { CaretTop } from '@element-plus/icons-vue';
	import { ElMessage } from 'element-plus';

	const props = defineProps<{
		source: string;
		path: string;
		rawSource: string;
		description?: string;
	}>();

	const { copy, isSupported } = useClipboard({
		source: decodeURIComponent(props.rawSource),
		read: false,
	});

	const sourceVisible = ref<boolean>(false);
	const demos: any = import.meta.glob('./../examples/**/*.vue', {
		eager: true,
	});

	const formatPathDemos = computed(() => {
		const demoObj = {};

		Object.keys(demos || {}).forEach(key => {
			demoObj[key.replace('../examples/', '').replace('.vue', '')] =
				demos[key].default;
		});
		return demoObj;
	});

	const decodedDescription = computed(() =>
		decodeURIComponent(props.description!)
	);

	const decoded = computed(() => {
		return decodeURIComponent(props.source);
	});

	const copyCode = async () => {
		if (!isSupported) {
			ElMessage.error('此浏览器不支持自动复制');
		}
		try {
			await copy();
			ElMessage.success('复制成功');
		} catch (e: any) {
			ElMessage.error(e.message);
		}
	};
</script>

<style lang="scss" scoped>
	.language-vue {
		margin: 0 !important;
		border-radius: 0 !important;
	}

	.card-wrapper {
		border: 1px solid var(--border-color);
		border-radius: 4px;
		margin: 0.5px;
		background-color: var(--bg-color);
	}

	.card-examples {
		padding: 1.5rem;
	}

	.card-footer {
		padding: 0.5rem;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: 2.5rem;
		border-top: 1px solid var(--border-color);
	}

	.tooltip-margin {
		margin: 0 0.5rem;
		color: var(--text-color-lighter);
		transition: 0.2s;
		cursor: pointer;
	}

	.example-float-control {
		display: flex;
		align-items: center;
		justify-content: center;
		border-top: 1px solid var(--border-color);
		height: 44px;
		box-sizing: border-box;
		background-color: var(--bg-color, #fff);
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
		margin-top: -1px;
		color: var(--el-text-color-secondary);
		cursor: pointer;
		position: sticky;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
	}

	.example-float-control:hover {
		color: #409eff;
	}
</style>
<style lang="scss">
	.popper-h {
		background: var(--bg-popper) !important;
		color: var(--bg-popper-color) !important;
	}
</style>
